@import "pre.css";

$goldColor: #FAAA20;
$greenColor:#20C05C;
$whiteColor:#00AAEE;
$redColor:#CC3434;
$yellowColor:#6D3A1C;

@mixin colorFunction($color,$colorKind){
    #{$colorKind} {
        .num {
            color: $color;
            height: auto !important;
            line-height: inherit !important;
            padding-left: 1rem;
            padding-right: 1rem;
            font-size: 0.9rem;
        }
        .teacher-words{
            color: $color;
        }
        .num:focus{
            border: 1px solid $color;
            color: $color;
        }
        #next{
            border: 1px solid $color;
            background-color: $color;
        }
        #next:active{
            border: 1px solid $color;
            background-color: $color;
        }
        #next:visited{
            border: 1px solid $color;
            background-color: $color;
        }
        hr{
            border-top: 1px solid $color;
        }
        .mui-badge{
            background-color: $color;
        }
        .certifyInput:focus {
            border: 1px solid $color;
        }
        #certify{
            border: 1px solid $color;
            background-color: $color;
        }
        #certify:active{
            border: 1px solid $color;
            background-color: $color;
        }
        #certify:visited{
            border: 1px solid $color;
            background-color: $color;
        }
    }
}

#protocol {
    position: fixed;
    top: 0rem;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;
    height: auto !important;
    width: auto !important;
    z-index: 100;
    background: rgba(0,0,0,.5);
    opacity: 1;

    .pop {
        position: relative;
        width: 85%;
        z-index: 101;
        background: #fff;
        margin-top: 8rem;
        margin-left: 7.5%;
        border-radius: 24px;
    }
}

.certifyInput {
    height: auto !important;
    line-height: inherit !important;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.9rem;
}

@include colorFunction($goldColor,".gold");
@include colorFunction($greenColor,".green");
@include colorFunction($whiteColor,".white");
@include colorFunction($redColor,".red");
@include colorFunction($yellowColor,".yellow");